<template>
  <div>
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="80px">
      <el-form-item label="时间范围">
        <el-date-picker
          v-model="dateValue"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00', '08:00:00']"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="处理状态" prop="processStatus">
        <el-select v-model="queryParams.processStatus" placeholder="请选择" clearable>
          <el-option :key="'1'" label="已处理" :value="'1'" />
          <el-option :key="'0'" label="未处理" :value="'0'" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-has-permission="['knowledge:message:updateStatus']"
          type="warning"
          plain
          icon="el-icon-odometer"
          size="small"
          @click="handleUpdate"
        >批量处理</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table v-loading="loading" :data="unAnswerList" style="width: 100%" empty-text="暂无数据" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" :selectable="checkSelectAble" />
        <el-table-column label="序号" type="index" align="center" sortable/>
        <el-table-column prop="createTime" label="创建时间" align="center" sortable width="150" />
        <el-table-column prop="nickName" label="创建者" align="center" show-overflow-tooltip width="200" />
        <el-table-column prop="content" label="问题" align="center" show-overflow-tooltip />
        <el-table-column prop="possibleCause" label="可能原因" align="center" show-overflow-tooltip/>
        <el-table-column prop="processStatus" label="处理状态" align="center" width="150">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.processStatus === '1'" type="success">已处理</el-tag>
            <el-tag v-else type="danger">未处理</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="300"
        >
          <template v-if="scope.row.processStatus === '0'" slot-scope="scope">
            <el-button
              v-has-permission="['knowledge:message:updateStatus']"
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            >处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-pagination
      :page-size.sync="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-sizes="[10, 20, 30, 40]"
      :current-page.sync="queryParams.pageNum"
      @current-change="getList"
      @size-change="getList"
    />
  </div>
</template>
<script>
import { processUnAnswerQuestion, listUnAnswerQuestion } from '@/api/knowledge/keywords'

export default {
  name: 'UnAnswer',
  data() {
    return {
      unAnswerList: [],
      ids: [],
      // 查询参数
      queryParams: {
        startTime: '',
        endTime: '',
        processStatus: '',
        pageNum: 1,
        pageSize: 10
      },
      loading: true,
      total: 0,
      showSearch: true,
      dateValue: []
    }
  },
  watch: {
    dateValue: {
      handler(newVal, oldVal) {
        if (newVal != null) {
          this.queryParams.startTime = newVal[0]
          this.queryParams.endTime = newVal[1]
        } else {
          this.queryParams.startTime = ''
          this.queryParams.endTime = ''
        }
      },
      immediate: false
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleUpdate(row) {
      const ids = row.id || this.ids
      if (ids === '' || ids === null || ids === undefined || (ids instanceof Array && ids.length === 0)) {
        this.$modal.msg('您未选中任何内容')
      } else {
        this.$modal.confirm('是否勾选处理编号为"' + ids + '"的数据项？').then(function() {
          return processUnAnswerQuestion(ids)
        }).then(() => {
          this.getList()
          this.$modal.msgSuccess('处理成功')
        }).catch(() => {})
      }
    },
    getList() {
      this.loading = true
      listUnAnswerQuestion(this.queryParams).then(response => {
        this.unAnswerList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
    },
    handleQuery() {
      this.getList()
    },
    checkSelectAble(row) {
      if (row.processStatus === '1') {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style scoped>

</style>
